<script setup lang="ts">
  import { Form } from 'vee-validate';
  import { useLocale } from '@/locales/useLocale';
  import { DynamicFormOption } from '@/components/types';
  import { ref, Ref } from 'vue';
  const props = withDefaults(
    defineProps<{
      as: string;
      validationSchema: Recordable;
      initialValues: Recordable;
      labelWidth?: string;
      labelPosition?: 'right' | 'left' | 'top';
      options: DynamicFormOption[];
      loading?: boolean;
      size?: 'large' | 'small' | 'default';
      submitContent?: string;
      animateClass?: string;
    }>(),
    {
      as: 'ElForm',
      //@ts-ignore
      validationSchema: {} as Recordable,
      //@ts-ignore
      initialValues: {} as Recordable,
      labelWidth: '0',
      labelPosition: 'right',
      //@ts-ignore
      options: {} as DynamicFormOption[],
      size: 'default',
      submitContent: 'message.sys.login.loginButton',
      loading: false,
      animateClass: 'enter-x',
    }
  );
  const emits = defineEmits(['onSubmit']);
  const { t } = useLocale();
  function onSubmit(values: Recordable, formTool: Recordable) {
    emits('onSubmit', values, formTool);
  }
</script>

<template>
  <Form
    as="ElForm"
    :validation-schema="validationSchema"
    @submit="onSubmit"
    :initialValues="initialValues"
    :label-width="labelWidth"
    :label-position="labelPosition"
    v-slot="{ values }"
  >
    <component
      v-for="option in options"
      v-bind="option"
      :is="option.is"
      :key="option.name"
      @img-click="option.imgClick"
      @send-sms="option.sendSms"
      :parentId="values.disCls || option.parentId"
      :size="size"
      :animateClass="animateClass"
    />
    <slot name="submit">
      <el-button
        native-type="submit"
        :size="size"
        type="primary"
        class="w-full"
        :class="animateClass"
        :loading="loading"
      >
        {{ t(submitContent) }}
      </el-button>
    </slot>
  </Form>
</template>

<style lang="scss"></style>
